<template>
  <view class="container">
    <!-- 顶部渐变背景 -->
    <view class="gradient-header"></view>
    
    <!-- 可滚动内容区域 -->
    <view class="scrollable-content">
      <!-- 用户信息区 - 悬浮卡片效果 -->
      <view class="user-info-card">
        <view class="avatar-section">
          <view class="avatar">
            <image v-if="userInfo.avatar" :src="userInfo.avatar" class="avatar-img" /> 
            <text v-else class="avatar-placeholder">{{ userInfo.nickname ? userInfo.nickname.charAt(0) : '用' }}</text>
            <view class="avatar-badge">
              <text class="icon-text">📷</text>
            </view>
          </view>
          <view class="user-details">
            <text class="username">{{ userInfo.nickname || '用户昵称' }}</text>
            <text class="email">{{ userInfo.username || 'user@example.com' }}</text>
            <view class="user-level">
              <text class="level-text">等级: Lv.1</text>
              <text class="exp-text">经验值: 250/500</text>
            </view>
          </view>
        </view>
        
        <!-- 快捷数据展示 -->
        <view class="quick-stats">
          <view class="stat-item">
            <text class="stat-value">1</text>
            <text class="stat-label">关联账户</text>
          </view>
          <view class="stat-item">
            <text class="stat-value">12</text>
            <text class="stat-label">获得积分</text>
          </view>
          <view class="stat-item">
            <text class="stat-value">3</text>
            <text class="stat-label">已完成目标</text>
          </view>
        </view>
      </view>

      <!-- 账户管理 -->
      <view class="section">
        <text class="section-title">账户管理</text>
        <view class="menu-group">
          <view class="menu-item" @click="goToEditProfile" hover-class="menu-item-hover">
            <view class="menu-icon bg-blue">
              <text class="icon-text">👤</text>
            </view>
            <text class="menu-text">个人资料</text>
            <text class="menu-desc">管理个人信息</text>
            <text class="arrow">></text>
          </view>
          
          <view class="menu-item" @click="goToChangePassword" hover-class="menu-item-hover">
            <view class="menu-icon bg-green">
              <text class="icon-text">🔒</text>
            </view>
            <text class="menu-text">修改密码</text>
            <text class="menu-desc">更改登录密码</text>
            <text class="arrow">></text>
          </view>
          
          <view class="menu-item" @click="goToPrivacySettings" hover-class="menu-item-hover">
            <view class="menu-icon bg-purple">
              <text class="icon-text">🔐</text>
            </view>
            <text class="menu-text">隐私设置</text>
            <text class="menu-desc">数据隐私保护</text>
            <text class="arrow">></text>
          </view>
        </view>
      </view>

      <!-- 系统设置 -->
      <view class="section">
        <text class="section-title">系统设置</text>
        <view class="menu-group">
          <view class="menu-item" hover-class="menu-item-hover">
            <view class="menu-icon bg-red">
              <text class="icon-text">🔔</text>
            </view>
            <text class="menu-text">推送通知</text>
            <text class="menu-desc">接收应用通知</text>
            <switch :checked="notificationEnabled" color="#07c160" class="switch" @change="toggleNotification"></switch>
          </view>
          
          <view class="menu-item" @click="goToFocusReminder" hover-class="menu-item-hover">
            <view class="menu-icon bg-orange">
              <text class="icon-text">⏰</text>
            </view>
            <text class="menu-text">专注提醒</text>
            <text class="menu-desc">设置学习提醒</text>
            <text class="arrow">></text>
          </view>
          
          <view class="menu-item" hover-class="menu-item-hover">
            <view class="menu-icon bg-indigo">
              <text class="icon-text">🌙</text>
            </view>
            <text class="menu-text">深色模式</text>
            <text class="menu-desc">护眼模式</text>
            <switch :checked="darkModeEnabled" color="#07c160" class="switch" @change="toggleDarkMode"></switch>
          </view>
          
          <view class="menu-item" @click="goToLanguageSettings" hover-class="menu-item-hover">
            <view class="menu-icon bg-teal">
              <text class="icon-text">🌐</text>
            </view>
            <text class="menu-text">语言设置</text>
            <text class="menu-desc">简体中文</text>
            <text class="arrow">></text>
          </view>
        </view>
      </view>

      <!-- 帮助与反馈 -->
      <view class="section">
        <text class="section-title">帮助与反馈</text>
        <view class="menu-group">
          <view class="menu-item" @click="goToFeedback" hover-class="menu-item-hover">
            <view class="menu-icon bg-pink">
              <text class="icon-text">💬</text>
            </view>
            <text class="menu-text">意见反馈</text>
            <text class="menu-desc">提交问题和建议</text>
            <text class="arrow">></text>
          </view>
          
          <view class="menu-item" @click="goToHelp" hover-class="menu-item-hover">
            <view class="menu-icon bg-yellow">
              <text class="icon-text">❓</text>
            </view>
            <text class="menu-text">使用帮助</text>
            <text class="menu-desc">查看使用指南</text>
            <text class="arrow">></text>
          </view>
          
          <view class="menu-item" @click="goToBugReport" hover-class="menu-item-hover">
            <view class="menu-icon bg-gray">
              <text class="icon-text">🐞</text>
            </view>
            <text class="menu-text">故障报告</text>
            <text class="menu-desc">报告应用问题</text>
            <text class="arrow">></text>
          </view>
        </view>
      </view>

      <!-- 应用信息 -->
      <view class="section">
        <text class="section-title">应用信息</text>
        <view class="menu-group">
          <view class="menu-item" @click="checkUpdate" hover-class="menu-item-hover">
            <view class="menu-icon bg-cyan">
              <text class="icon-text">🔄</text>
            </view>
            <text class="menu-text">检查更新</text>
            <text class="menu-desc">当前版本 v1.2.0</text>
            <text class="arrow">></text>
          </view>
          
          <view class="menu-item" @click="goToAbout" hover-class="menu-item-hover">
            <view class="menu-icon bg-amber">
              <text class="icon-text">ℹ️</text>
            </view>
            <text class="menu-text">关于应用</text>
            <text class="menu-desc">应用详细信息</text>
            <text class="arrow">></text>
          </view>
          
          <view class="menu-item" @click="goToRate" hover-class="menu-item-hover">
            <view class="menu-icon bg-rose">
              <text class="icon-text">⭐</text>
            </view>
            <text class="menu-text">评价应用</text>
            <text class="menu-desc">在应用商店评分</text>
            <text class="arrow">></text>
          </view>
        </view>
      </view>

      <!-- 退出登录 -->
      <view class="logout-section">
        <button class="logout-btn" @click="handleLogout" open-type="default">
          <text class="logout-text">退出登录</text>
        </button>
      </view>

      <!-- 底部安全区域 -->
      <view class="safe-area"></view>
    </view>
  </view>
</template>

<script>
import { getStorage, removeStorage, setStorage } from '../../utils/storage.js';
import { services } from '../../api/index.js';
const userAPI = services.user;

export default {
  data() {
    return {
      userInfo: {
        username: '',
        nickname: '',
        avatar: ''
      },
      notificationEnabled: true,
      darkModeEnabled: false
    };
  },
  
  async onLoad() {
    // 本地设置
    const settings = getStorage('settings');
    if (settings) {
      this.notificationEnabled = settings.notificationEnabled !== undefined ? settings.notificationEnabled : true;
      this.darkModeEnabled = settings.darkModeEnabled !== undefined ? settings.darkModeEnabled : false;
    }

    await this.fetchUserInfo();
  },
  onPullDownRefresh() {
    this.fetchUserInfo().finally(() => {
      uni.stopPullDownRefresh();
    });
  },
  
  methods: {
    async fetchUserInfo() {
      try {
        uni.showLoading({ title: '加载中...' });
        const resp = await userAPI.getUserInfo();
        const data = resp?.data || resp || {};
        // 映射后端字段到前端展示结构
        const mapped = {
          username: data.userEmail || data.userPhone || data.userCode || '',
          nickname: data.userNike || '',
          avatar: data.imgPath || ''
        };
        this.userInfo = mapped;
        setStorage('userInfo', mapped);
      } catch (e) {
        // 回退到本地缓存
        const cached = getStorage('userInfo');
        if (cached) this.userInfo = cached;
      } finally {
        uni.hideLoading();
      }
    },
    // 账户管理相关
    goToEditProfile() {
      uni.navigateTo({
        url: '/pages/account/edit-profile'
      });
    },
    
    goToChangePassword() {
      uni.navigateTo({
        url: '/pages/account/change-password'
      });
    },
    
    goToPrivacySettings() {
      // 隐私设置页面尚未创建，这里仅做占位
      uni.showToast({
        title: '隐私设置功能开发中',
        icon: 'none'
      });
    },
    
    // 系统设置相关
    toggleNotification() {
      this.notificationEnabled = !this.notificationEnabled;
      this.saveSettings();
    },
    
    goToFocusReminder() {
      // 专注提醒页面尚未创建，这里仅做占位
      uni.showToast({
        title: '专注提醒功能开发中',
        icon: 'none'
      });
    },
    
    toggleDarkMode() {
      this.darkModeEnabled = !this.darkModeEnabled;
      this.saveSettings();
      // 实际项目中这里应该调用切换主题的方法
      uni.showToast({
        title: this.darkModeEnabled ? '深色模式已开启' : '深色模式已关闭',
        icon: 'none'
      });
    },
    
    goToLanguageSettings() {
      // 语言设置页面尚未创建，这里仅做占位
      uni.showToast({
        title: '语言设置功能开发中',
        icon: 'none'
      });
    },
    
    // 帮助与反馈相关
    goToFeedback() {
      uni.navigateTo({
        url: '/pages/account/feedback'
      });
    },
    
    goToHelp() {
      // 使用帮助页面尚未创建，这里仅做占位
      uni.showToast({
        title: '使用帮助功能开发中',
        icon: 'none'
      });
    },
    
    goToBugReport() {
      // 故障报告页面尚未创建，这里仅做占位
      uni.showToast({
        title: '故障报告功能开发中',
        icon: 'none'
      });
    },
    
    // 应用信息相关
    checkUpdate() {
      // 检查更新功能尚未实现，这里仅做占位
      uni.showToast({
        title: '已是最新版本',
        icon: 'success'
      });
    },
    
    goToAbout() {
      // 关于应用页面尚未创建，这里仅做占位
      uni.showToast({
        title: '关于应用功能开发中',
        icon: 'none'
      });
    },
    
    goToRate() {
      // 评价应用功能尚未实现，这里仅做占位
      uni.showToast({
        title: '评价应用功能开发中',
        icon: 'none'
      });
    },
    
    // 退出登录
    handleLogout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            // 调用后端退出
            uni.showLoading({ title: '正在退出...' });
            userAPI.logout().finally(() => {
              uni.hideLoading();
              removeStorage('userInfo');
              removeStorage('isLogin');
              uni.showToast({ title: '已退出登录', icon: 'success' });
              setTimeout(() => {
                uni.reLaunch({ url: '/pages/auth/login' });
              }, 800);
            });
          }
        }
      });
    },
    
    // 保存设置
    saveSettings() {
      const settings = {
        notificationEnabled: this.notificationEnabled,
        darkModeEnabled: this.darkModeEnabled
      };
      setStorage('settings', settings);
    },
  }
};
</script>

<style lang="scss" scoped>
// 定义颜色变量
$primary-color: #07c160;
$text-primary: #333;
$text-secondary: #666;
$text-tertiary: #999;
$background-color: #f5f5f5;
$border-color: #eee;
$danger-color: #ff4d4f;

// 间距变量
$spacing-xs: 10rpx;
$spacing-sm: 20rpx;
$spacing-base: 30rpx;
$spacing-lg: 40rpx;
$spacing-xl: 60rpx;

// 尺寸变量
$avatar-size: 150rpx;
$icon-size: 48rpx;
$menu-height: 120rpx;

// 基础样式
.container {
  padding: 0;
  background-color: $background-color;
  min-height: 100vh;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  /* 适配刘海屏等异形屏设备的顶部安全区域 */
  padding-top: env(safe-area-inset-top);
}

/* 可滚动内容区域 */
.scrollable-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* iOS设备上的平滑滚动 */
  padding: $spacing-base;
  // padding-top: 150rpx;
  position: relative;
  z-index: 2;
}

/* 隐藏滚动条但保留滚动功能 */
.scrollable-content::-webkit-scrollbar {
  display: none;
}

.scrollable-content {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.gradient-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 220rpx;
  background: linear-gradient(135deg, #07c160 0%, #07c190 100%);
  z-index: 1;
}

// 用户信息卡片 - 悬浮效果
.user-info-card {
  background-color: #fff;
  border-radius: 30rpx;
  padding: $spacing-lg;
  margin-bottom: $spacing-lg;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.avatar-section {
  display: flex;
  align-items: center;
  margin-bottom: $spacing-lg;
}

.avatar {
  width: $avatar-size;
  height: $avatar-size;
  border-radius: 50%;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: $spacing-base;
  overflow: hidden;
  border: 4rpx solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.1);
  position: relative;
}

.avatar-img {
  width: 100%;
  height: 100%;
}

.avatar-placeholder {
  font-size: 56rpx;
  color: $primary-color;
  font-weight: bold;
}

.avatar-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 44rpx;
  height: 44rpx;
  border-radius: 50%;
  background-color: $primary-color;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4rpx solid #fff;
}

.user-details {
  flex: 1;
  min-width: 0;
}

.username {
  font-size: 40rpx;
  font-weight: bold;
  color: $text-primary;
  margin-bottom: $spacing-xs;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.email {
  font-size: 28rpx;
  color: $text-secondary;
  margin-bottom: $spacing-xs;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-level {
  display: flex;
  flex-wrap: wrap;
  gap: $spacing-base;
}

.level-text,
.exp-text {
  font-size: 24rpx;
  color: $text-tertiary;
}

// 快捷数据统计
.quick-stats {
  display: flex;
  justify-content: space-around;
  padding-top: $spacing-base;
  border-top: 1rpx solid $border-color;
}

.stat-item {
  text-align: center;
  flex: 1;
}

.stat-value {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  color: $primary-color;
  margin-bottom: $spacing-xs;
}

.stat-label {
  font-size: 24rpx;
  color: $text-secondary;
}

// 菜单区域
.section {
  margin-bottom: $spacing-sm;
  background-color: #fff;
  border-radius: 30rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.02);
}

.section-title {
  font-size: 28rpx;
  color: $text-tertiary;
  padding: $spacing-base;
  display: block;
}

.menu-group { min-height: 1rpx; }

.menu-item {
  display: flex;
  align-items: center;
  height: $menu-height;
  padding: 0 $spacing-base;
  border-bottom: 1rpx solid $border-color;
  transition: background-color 0.2s;
  position: relative;
  overflow: hidden;
  
  &:last-child {
    border-bottom: none;
  }
}

.menu-item-hover {
  background-color: #fafafa;
}

.menu-icon {
  width: 64rpx;
  height: 64rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: $spacing-base;
  flex-shrink: 0;
}

// 不同图标背景色
.bg-blue { background-color: rgba(30, 136, 229, 0.1); }
.bg-green { background-color: rgba(67, 160, 71, 0.1); }
.bg-purple { background-color: rgba(123, 31, 162, 0.1); }
.bg-red { background-color: rgba(229, 57, 53, 0.1); }
.bg-orange { background-color: rgba(245, 124, 0, 0.1); }
.bg-indigo { background-color: rgba(57, 73, 171, 0.1); }
.bg-teal { background-color: rgba(0, 137, 123, 0.1); }
.bg-pink { background-color: rgba(216, 27, 96, 0.1); }
.bg-yellow { background-color: rgba(253, 216, 53, 0.1); }
.bg-gray { background-color: rgba(97, 97, 97, 0.1); }
.bg-cyan { background-color: rgba(0, 172, 193, 0.1); }
.bg-amber { background-color: rgba(255, 179, 0, 0.1); }
.bg-rose { background-color: rgba(233, 30, 99, 0.1); }

.icon-text {
  font-size: 36rpx;
  color: #fff;
}

.menu-text {
  font-size: 32rpx;
  color: $text-primary;
  flex: 1;
}

.menu-desc {
  font-size: 24rpx;
  color: $text-tertiary;
  margin-left: $spacing-sm;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.arrow {
  font-size: 32rpx;
  color: $text-tertiary;
}

.switch {
  transform: scale(0.8);
}

// 退出登录
.logout-section {
  padding: $spacing-xl 0;
}

.logout-btn {
  width: 100%;
  height: 96rpx;
  background-color: #fff;
  border: 1rpx solid $danger-color;
  border-radius: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.02);
}

.logout-btn:active {
  background-color: $danger-color;
  color: #fff;
}

.logout-text {
  font-size: 32rpx;
  color: $danger-color;
}

.logout-btn:active .logout-text {
  color: #fff;
}

// 安全区域
.safe-area {
  height: 30rpx;
}

// 添加动画效果
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.section {
  animation: fadeInUp 0.5s ease-out;
}

.section:nth-child(2) { animation-delay: 0.1s; }
.section:nth-child(3) { animation-delay: 0.2s; }
.section:nth-child(4) { animation-delay: 0.3s; }
.section:nth-child(5) { animation-delay: 0.4s; }
</style>